<!-- 机器人的信息 -->
<template>
  <div class="bot-info">
    <div class="bot-info__top">
      <van-image :src="handleImagShow(aiUserInfo.photo)" class="image" />
      <div class="bot-info__right">
        <div class="bot-info__baseinfo">
          <span class="nickname">{{ aiUserInfo.nickname }}</span>
          <span class="sex-box" v-if="aiUserInfo.gender == 1"><img src="@/assets/images/female.png" class="sex" />{{ aiUserInfo.age }}</span>
          <span class="sex-box boy" v-if="aiUserInfo.gender == 2"><img src="@/assets/images/male.png" class="sex" />{{ aiUserInfo.age }}</span>
        </div>
        <div class="bot-info__tags">
          <!-- 类型标签 -->
          <span class="category">👩 {{aiUserInfo.category}}</span>
          <!-- 职业标签 -->
          <span class="tag">✨ {{aiUserInfo.tags[0]}}</span>
          <!-- 性格标签 -->
          <span class="profession_tags">💃 {{aiUserInfo.profession_tags[0]}}</span>
        </div>
      </div>
    </div>
    <div class="bot-info__bottom">{{aiUserInfo.description}}</div>
  </div>
</template>

<script lang="ts" setup>
import { AiUserInfo } from '../../types'
defineProps<{ aiUserInfo: AiUserInfo }>()
import { handleImagShow } from '../../helpers'
</script>

<style lang="scss" scoped>
.bot-info {
  background: rgba(20, 20, 20, 0.5);
  border-radius: 14px;
  padding: 12px;
  &__top {
    display: flex;
  }
  &__right {
    flex: 1;
    margin-left: 8px;
  }
  &__baseinfo {
    display: flex;
    .nickname {
      font-size: 20px;
      color: #fff;
      font-weight: 700;
    }
    .sex-box{
      background: rgba(255, 232, 250, 1);
      color: rgba(215, 30, 185, 1);
      font-size: 12px;
      font-weight: 600;
      padding: 3px;
      border-radius: 6px;
      width: 34px;
      display: flex;
      align-items: center;
      margin-left: 6px;
    }
    .boy {
      color: rgba(44, 129, 255, 1);
      background: rgba(225, 235, 255, 1);
    }
    .sex {
      width: 12px;
      height: 12px;
      margin-right: 3px;
    }
  } 
  &__tags {
    font-size: 12px;
    gap: 8px;
    display: flex;
    margin-top: 11px;
    span {
      padding: 4px 6px;
      border-radius: 21px;
      background: rgba(254, 233, 237, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 1.5;
      font-weight: 500;
      color: #fff;
    }
    .category {
      color: rgba(245, 58, 101, 1);
    }
    .tag {
      background: rgba(245, 58, 101, 0.5);
    }
    .profession_tags {
      background: rgba(137, 24, 255, 0.5);
    }
  }
  &__bottom {
    color: #fff;
    font-size: 14px;
    margin-top: 8px;
  }
  .image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>